<template>
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets" style="margin-top: 5px"></i>
            <span style="margin-top: 5px">数据列表</span>
            <el-button class="btn-add" @click="handleAddMenu()" size="mini">添加</el-button>
        </el-card>

        <div class="table-container" style="margin-top: 20px;">
            <el-table ref="menuTable" style="width: 100%" :data="list" border>
                <el-table-column label="编号" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.id}}</template>
                </el-table-column>
                <el-table-column label="菜单名称" align="center">
                    <template slot-scope="scope">{{scope.row.title}}</template>
                </el-table-column>
                <el-table-column label="菜单级数" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.level | levelFilter}}</template>
                </el-table-column>
                <el-table-column label="前端名称" align="center">
                    <template slot-scope="scope">{{scope.row.name}}</template>
                </el-table-column>
                <el-table-column label="前端图标" width="100" align="center">
                    <template slot-scope="scope"><svg-icon :icon-class="scope.row.icon"></svg-icon></template>
                </el-table-column>
                <el-table-column label="是否显示" width="100" align="center">
                    <template slot-scope="scope">
                        <el-switch @change="handleHiddenChange(scope.$index, scope.row)" :active-value="0" :inactive-value="1" v-model="scope.row.hidden"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="排序" width="100" align="center">
                    <template slot-scope="scope">{{scope.row.sort }}</template>
                </el-table-column>
                <el-table-column label="设置" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" :disabled="scope.row.level | disableNextLevel" @click="handleShowNextLevel(scope.$index, scope.row)">查看下级</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import {queryUmsMenuList, deleteUmsMenu} from '@/api/ums/menu'
  export default {
    name: "menuList",
    data() {
      return {
        listQuery: {
            pageNum: 1,
            pageSize: 5
        },
        list:[],
        parentId: 0
      }
    },
    created() {
        this.resetParentId();
        this.getList();
    },
    watch: {
        $route(route) {
            this.resetParentId();
            this.getList();
        }
    },
    methods: {
        resetParentId() {
            this.listQuery.pageNum = 1;
            if (this.$route.query.parentId != null) {
                this.parentId = this.$route.query.parentId;
            } else {
                this.parentId = 0;
            }
        },
        // 添加菜单
        handleAddMenu() {
            this.$router.push('/umsMenuAdd');
        },
        handleUpdate(index, row) {
            this.$router.push({
                path:'/umsMenuUpdate',
                query: {id: row.id}}
            );
        },
        getList() {
            queryUmsMenuList(this.parentId, this.listQuery).then(response => {
                let data = response.data.data;
                this.list = data.list;
            });
        },
        handleHiddenChange(index, row) {
            
        },
        handleShowNextLevel(index, row) {
            this.$router.push({path: '/umsMenuIndex', query: {parentId: row.id}})
        },

        handleDelete(index, row) {
            this.$confirm('是否要删除该菜单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
                deleteUmsMenu(row.id).then(response => {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration: 1000
                    });
                    this.getList();
                })
            })
        }
    },
    filters: {
        levelFilter(value) {
            if (value === 0) {
                return '一级';
            } else if (value === 1) {
                return '二级';
            }
        },
        disableNextLevel(value) {
            if (value === 0) {
                return false;
            } else {
                return true;
            }
        }
    }
}
</script>

<style>

</style>